<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插入数据</title>
</head>
<body>
    <button type="button">插入数据</button>
    <ul id="list">

    </ul>


    <script>
        var btn = document.querySelector('button')
        var list = document.querySelector('#list')

        var arr=[{name:'刘德华',age:62,sex:'男'},{name:'张学友',age:52,sex:'男'},{name:'黎明',age:66,sex:'男'},{name:'郭富城',age:64,sex:'男'}]

        for(var i = 0;i<arr.length;i++){
            var oLi = document.createElement('li')
            var oLt = document.createElement('div')
            oLt.innerText = arr[i].name + "的基本信息"
            
            var oLc = document.createElement('div')

            var p1 = document.createElement('p')
            p1.innerText = '姓名:' + arr[i].name
            oLc.appendChild(p1)

            var p2 = document.createElement('p')
            p2.innerText = '年龄:' + arr[i].age
            oLc.appendChild(p2)

            var p3 = document.createElement('p')
            p1.innerText = '性别:' + arr[i].sex
            oLc.appendChild(p3)

            oLi.appendChild(oLt)
            oLi.appendChild(oLc)
            list.appendChild(oLi)
        }


    </script>
</body>
</html>